<template>
    <div v-show="noShow">
       <div class="masker">
           <div class="add-modal">
              <div class="title"> 
                <span class="title-l">修改成员信息</span>
                <span class="title-f" @click="cancel">x</span>
              </div>
                <form >
                    <div>
                        <label for="">姓名:
                            <input type="text" v-model="updateObj.name">
                        </label>
                    </div>
                    <div>
                        <label for="">年龄:
                            <input type="text" v-model="updateObj.age">
                        </label>
                    </div>
                    <div>
                        <label for="">性别:
                            <input type="radio" v-model="updateObj.gender" name="genders" value="男">男
                            <input type="radio" v-model="updateObj.gender" name="genders" value="女">女
                        </label>
                    </div>
                     <div>
                        <label for="">爱好:
                            <input type="checkbox" v-model="updateObj.hobbies" value="吃">吃
                            <input type="checkbox" v-model="updateObj.hobbies" value="喝">喝
                             <input type="checkbox" v-model="updateObj.hobbies" value="玩">玩
                            <input type="checkbox" v-model="updateObj.hobbies" value="乐">乐
                        </label>
                    </div>
                     <div>
                        <label for="">电话:
                            <input type="text" v-model="updateObj.tel">
                        </label>
                    </div>
                    <div>
                         <label for="">班级:
                            <select v-model="updateObj.grade">
                                    <option value="" >请选择</option>
                                    <option value="1807" >1807</option>
                                    <option value="1808">1808</option>
                                    <option value="1809">1809</option>
                            </select>
                     </label>
                    </div>
                    <div>
                        <button type="button" @click="upSaveBtn">保存</button>
                        <button type="reset">重置</button>
                    </div>
                </form>
           </div>
       </div>
    </div>
</template>
<script>
import axios from 'axios'
    export default {
        props:["getData",'upItem','upId'],
        data(){
            return {
                updateObj:{
                    name:'',
                    age:'',
                    gender:'男',
                    hobbies:[],
                    tel:'',
                    grade:''
                },
                noShow:false
            }
        },
        methods:{
             cancel(){
                 this.$emit('modalHides',this.noShow)
             },
             upSaveBtn(){
                let obj = JSON.parse(JSON.stringify(this.updateObj));
                obj.hobbies = JSON.stringify(obj.hobbies)
                 console.log(this.upId)
                axios.put('http://localhost/api.php/jqsystems/'+this.upId,obj)
                .then( (res) =>{
                    if(res.data){
                        // console.log(res)
                        this.getData();
                        this.$emit('modalHides',this.noShow)
                    }
                })
                .catch( (err)=>{
                    // console.log(err)
                })
             }
        },
        watch:{
            upItem(){
                let obj = JSON.parse(JSON.stringify(this.upItem) )
                obj.hobbies = JSON.parse(obj.hobbies)
                this.updateObj = obj
            }
        }
    };
</script>
<style>
    .masker{
        position:fixed;
        top: 0;
        left: 0;
        bottom:0;
        right: 0;
        background: rgba(0, 0, 0, 0.5)
    }
    .add-modal{
        width: 600px;
        background: #fff;
        margin: 50px auto 0;
    }
    .add-modal form>div{
        height: 40px;
        line-height: 40px;
        margin-left: 60px;
        font-size: 20px;
    }
    .title{
        margin-left:20px 0 20px 40px;
        border-bottom: 2px solid #ccc;
        text-indent: 40px;
        padding: 10px;
        height: 40px;
        font-size: 24px
    }
    .title-l{
        float: left;
    }
    .title-f{
        float: right;
        color: #666;
    }
    .title-f:hover{
        color: #000;
    }

</style>


